.sc-btn {
  /* 定义不同样式下的中间变量 */
  /* primary */
  /* 普通状态下字体、背景、边框颜色 */
  --sc-button-text-color-primary:var(--sc-color-white);
  --sc-button-bg-color-primary: var(--sc-color-primary);
  --sc-button-border-color-primary:var(--sc-color-primary);
  /* --sc-button-outline-color-primary: var(--sc-color-primary-light-5); */
  /* hover状态下字体、背景、边框颜色*/
  --sc-button-hover-text-color-primary: var(--sc-color-white);
  --sc-button-hover-bg-color-primary: var(--sc-color-primary-light-3);
  --sc-button-hover-border-color-primary: var(--sc-color-primary-light-3);
  /* active状态下字体、背景、边框颜色*/
  --sc-button-active-text-color-primary: var(--sc-color-primary-dark-2);
  --sc-button-active-bg-color-primary: var(--sc-color-primary-dark-2);
  --sc-button-active-border-color-primary: var(--sc-color-primary-dark-2);
  /* disabled状态下字体、背景、边框颜色*/
  --sc-button-disabled-text-color-primary: var(--sc-color-white);
  --sc-button-disabled-bg-color-primary: var(--sc-color-primary-light-5);
  --sc-button-disabled-border-color-primary: var(--sc-color-primary-light);
  /* primary-plain */
  --sc-button-text-color-primary-plain:var(--sc-color-primary);
  --sc-button-bg-color-primary-plain: var(--sc-color-primary-light-9);
  --sc-button-border-color-primary-plain:var(--sc-color-primary-light-5);
  --sc-button-hover-text-color-primary-plain: var(--sc-color-white);
  --sc-button-hover-bg-color-primary-plain: var(--sc-color-primary);
  --sc-button-hover-border-color-primary-plain: var(--sc-color-primary);
  --sc-button-active-text-color-primary-plain: var(--sc-color-white);

  /* success */
  /* 普通状态下字体、背景、边框颜色 */
  --sc-button-text-color-success:var(--sc-color-white);
  --sc-button-bg-color-success: var(--sc-color-success);
  --sc-button-border-color-success:var(--sc-color-success);
  /* --sc-button-outline-color-success: var(--sc-color-success-light-5); */
  /* hover状态下字体、背景、边框颜色*/
  --sc-button-hover-text-color-success: var(--sc-color-white);
  --sc-button-hover-bg-color-success: var(--sc-color-success-light-3);
  --sc-button-hover-border-color-success: var(--sc-color-success-light-3);
  /* active状态下字体、背景、边框颜色*/
  --sc-button-active-text-color-success: var(--sc-color-success-dark-2);
  --sc-button-active-bg-color-success: var(--sc-color-success-dark-2);
  --sc-button-active-border-color-success: var(--sc-color-success-dark-2);
  /* disabled状态下字体、背景、边框颜色*/
  --sc-button-disabled-text-color-success: var(--sc-color-white);
  --sc-button-disabled-bg-color-success: var(--sc-color-success-light-5);
  --sc-button-disabled-border-color-success: var(--sc-color-success-light);
  /* success-plain */
  --sc-button-text-color-success-plain:var(--sc-color-success);
  --sc-button-bg-color-success-plain: var(--sc-color-success-light-9);
  --sc-button-border-color-success-plain:var(--sc-color-success-light-5);
  --sc-button-hover-text-color-success-plain: var(--sc-color-white);
  --sc-button-hover-bg-color-success-plain: var(--sc-color-success);
  --sc-button-hover-border-color-success-plain: var(--sc-color-success);
  --sc-button-active-text-color-success-plain: var(--sc-color-white);

  /* warning */
  /* 普通状态下字体、背景、边框颜色 */
  --sc-button-text-color-warning:var(--sc-color-white);
  --sc-button-bg-color-warning: var(--sc-color-warning);
  --sc-button-border-color-warning:var(--sc-color-warning);
  /* --sc-button-outline-color-warning: var(--sc-color-warning-light-5); */
  /* hover状态下字体、背景、边框颜色*/
  --sc-button-hover-text-color-warning: var(--sc-color-white);
  --sc-button-hover-bg-color-warning: var(--sc-color-warning-light-3);
  --sc-button-hover-border-color-warning: var(--sc-color-warning-light-3);
  /* active状态下字体、背景、边框颜色*/
  --sc-button-active-text-color-warning: var(--sc-color-warning-dark-2);
  --sc-button-active-bg-color-warning: var(--sc-color-warning-dark-2);
  --sc-button-active-border-color-warning: var(--sc-color-warning-dark-2);
  /* disabled状态下字体、背景、边框颜色*/
  --sc-button-disabled-text-color-warning: var(--sc-color-white);
  --sc-button-disabled-bg-color-warning: var(--sc-color-warning-light-5);
  --sc-button-disabled-border-color-warning: var(--sc-color-warning-light);
  /* warning-plain */
  --sc-button-text-color-warning-plain:var(--sc-color-warning);
  --sc-button-bg-color-warning-plain: var(--sc-color-warning-light-9);
  --sc-button-border-color-warning-plain:var(--sc-color-warning-light-5);
  --sc-button-hover-text-color-warning-plain: var(--sc-color-white);
  --sc-button-hover-bg-color-warning-plain: var(--sc-color-warning);
  --sc-button-hover-border-color-warning-plain: var(--sc-color-warning);
  --sc-button-active-text-color-warning-plain: var(--sc-color-white);

  /* danger */
  /* 普通状态下字体、背景、边框颜色 */
  --sc-button-text-color-danger:var(--sc-color-white);
  --sc-button-bg-color-danger: var(--sc-color-danger);
  --sc-button-border-color-danger:var(--sc-color-danger);
  /* --sc-button-outline-color-danger: var(--sc-color-danger-light-5); */
  /* hover状态下字体、背景、边框颜色*/
  --sc-button-hover-text-color-danger: var(--sc-color-white);
  --sc-button-hover-bg-color-danger: var(--sc-color-danger-light-3);
  --sc-button-hover-border-color-danger: var(--sc-color-danger-light-3);
  /* active状态下字体、背景、边框颜色*/
  --sc-button-active-text-color-danger: var(--sc-color-danger-dark-2);
  --sc-button-active-bg-color-danger: var(--sc-color-danger-dark-2);
  --sc-button-active-border-color-danger: var(--sc-color-danger-dark-2);
  /* disabled状态下字体、背景、边框颜色*/
  --sc-button-disabled-text-color-danger: var(--sc-color-white);
  --sc-button-disabled-bg-color-danger: var(--sc-color-danger-light-5);
  --sc-button-disabled-border-color-danger: var(--sc-color-danger-light);
  /* danger-plain */
  --sc-button-text-color-danger-plain:var(--sc-color-danger);
  --sc-button-bg-color-danger-plain: var(--sc-color-danger-light-9);
  --sc-button-border-color-danger-plain:var(--sc-color-danger-light-5);
  --sc-button-hover-text-color-danger-plain: var(--sc-color-white);
  --sc-button-hover-bg-color-danger-plain: var(--sc-color-danger);
  --sc-button-hover-border-color-danger-plain: var(--sc-color-danger);
  --sc-button-active-text-color-danger-plain: var(--sc-color-white);

  /* info */
  /* 普通状态下字体、背景、边框颜色 */
  --sc-button-text-color-info:var(--sc-color-white);
  --sc-button-bg-color-info: var(--sc-color-info);
  --sc-button-border-color-info:var(--sc-color-info);
  /* --sc-button-outline-color-info: var(--sc-color-info-light-5); */
  /* hover状态下字体、背景、边框颜色*/
  --sc-button-hover-text-color-info: var(--sc-color-white);
  --sc-button-hover-bg-color-info: var(--sc-color-info-light-3);
  --sc-button-hover-border-color-info: var(--sc-color-info-light-3);
  /* active状态下字体、背景、边框颜色*/
  --sc-button-active-text-color-info: var(--sc-color-info-dark-2);
  --sc-button-active-bg-color-info: var(--sc-color-info-dark-2);
  --sc-button-active-border-color-info: var(--sc-color-info-dark-2);
  /* disabled状态下字体、背景、边框颜色*/
  --sc-button-disabled-text-color-info: var(--sc-color-white);
  --sc-button-disabled-bg-color-info: var(--sc-color-info-light-5);
  --sc-button-disabled-border-color-info: var(--sc-color-info-light);
  /* info-plain */
  --sc-button-text-color-info-plain:var(--sc-color-info);
  --sc-button-bg-color-info-plain: var(--sc-color-info-light-9);
  --sc-button-border-color-info-plain:var(--sc-color-info-light-5);
  --sc-button-hover-text-color-info-plain: var(--sc-color-white);
  --sc-button-hover-bg-color-info-plain: var(--sc-color-info);
  --sc-button-hover-border-color-info-plain: var(--sc-color-info);
  --sc-button-active-text-color-info-plain: var(--sc-color-white);

  /* 默认 */
  --sc-button-text-color:var(--sc-button-text-color-primary);
  --sc-button-bg-color: var(--sc-button-bg-color-primary);
  --sc-button-border-color:var(--sc-button-border-color-primary);
  --sc-button-hover-text-color: var(--sc-button-hover-text-color-primary);
  --sc-button-hover-bg-color: var(--sc-button-hover-bg-color-primary);
  --sc-button-hover-border-color: var(--sc-button-hover-border-color-primary);
  --sc-button-active-text-color: var(--sc-button-active-text-color-primary);
  --sc-button-active-bg-color: var(--sc-button-active-bg-color-primary);
  --sc-button-active-border-color: var(--sc-button-active-border-color-primary);
  --sc-button-disabled-text-color: var(--sc-button-disabled-text-color-primary);
  --sc-button-disabled-bg-color: var(--sc-button-disabled-bg-color-primary);
  --sc-button-disabled-border-color: var(--sc-button-disabled-border-color-primary);

  /* --sc-button-outline-color: var(--sc-color-primary-light-5); */
  /* --sc-button-divide-border-color: rgba(255, 255, 255, .5); */
  /* --sc-button-hover-link-text-color: var(--sc-text-color-secondary); */
  --sc-button-font-weight: var(--sc-font-weight-primary);
}
.sc-btn {
  /* 按钮通用样式 */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  height: 32px;
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  transition: .1s;
  -webkit-user-sscect: none;
  vertical-align: middle;
  -webkit-appearance: none;
  appearance:none;
  padding: 8px 15px;

  /* 按钮变量样式 */
  border: var(--sc-border);
  font-weight: var(--sc-button-font-weight);
  font-size: var(--sc-font-size-base);
  border-radius: var(--sc-border-radius-base);
  /* 颜色变体样式 */
  color: var(--sc-button-text-color);
  background-color: var(--sc-button-bg-color);
  border-color: var(--sc-button-border-color);
}
.sc-btn:hover,.sc-btn:focus {
  color: var(--sc-button-hover-text-color);
  border-color: var(--sc-button-hover-border-color);
  background-color: var(--sc-button-hover-bg-color);
  outline: none;
}
.sc-btn:active {
  color: var(--sc-button-active-text-color);
  border-color: var(--sc-button-active-border-color);
  background-color: var(--sc-button-active-bg-color);
  outline: none;
}
.sc-btn.is-plain {
  --sc-button-hover-text-color: var(--sc-color-primary);
  --sc-button-hover-bg-color: var(--sc-fill-color-blank);
  --sc-button-hover-border-color: var(--sc-color-primary);
}
.sc-btn.is-round {
  border-radius: var(--sc-border-radius-round);
}
.sc-btn.is-circle {
  border-radius: 50%;
  padding: 8px;
}
.sc-btn.is-disabled,.sc-btn.is-disabled:hover,.sc-btn.is-disabled:focus,
.sc-btn[disabled],.sc-btn[disabled]:hover,.sc-btn[disabled]:focus {
  color: var(--sc-button-disabled-text-color);
  cursor: not-allowed;
  background-image: none;
  background-color: var(--sc-button-disabled-bg-color);
  border-color: var(--sc-button-disabled-border-color);
}
/* "primary" | "success" | "warning" | "danger" | "info"; */
/* $type:primary,success,warning,danger,info;
@each $val in $type {
  .sc-btn--$(val) {
    --sc-button-text-color:var(--sc-color-$(val));
    --sc-button-bg-color: var(--sc-color-$(val));
  }
} */
 [class*=sc-icon] + span {
  margin-left: 6px;
 }
 
/* 变体样式 */
/* primary */
.sc-btn--primary {
  --sc-button-text-color:var(--sc-button-text-color-primary);
  --sc-button-bg-color: var(--sc-button-bg-color-primary);
  --sc-button-border-color:var(--sc-button-border-color-primary);
  --sc-button-hover-text-color: var(--sc-button-hover-text-color-primary);
  --sc-button-hover-bg-color: var(--sc-button-hover-bg-color-primary);
  --sc-button-hover-border-color: var(--sc-button-hover-border-color-primary);
  --sc-button-active-text-color: var(--sc-button-active-text-color-primary);
  --sc-button-active-bg-color: var(--sc-button-active-bg-color-primary);
  --sc-button-active-border-color: var(--sc-button-active-border-color-primary);
  --sc-button-disabled-text-color: var(--sc-button-disabled-text-color-primary);
  --sc-button-disabled-bg-color: var(--sc-button-disabled-bg-color-primary);
  --sc-button-disabled-border-color: var(--sc-button-disabled-border-color-primary);
}
.sc-btn--primary.is-plain {
  --sc-button-text-color:var(--sc-button-text-color-primary-plain);
  --sc-button-bg-color: var(--sc-button-bg-color-primary-plain);
  --sc-button-border-color:var(--sc-button-border-color-primary-plain);
  --sc-button-hover-text-color: var(--sc-button-hover-text-color-primary-plain);
  --sc-button-hover-bg-color: var(--sc-button-hover-bg-color-primary-plain);
  --sc-button-hover-border-color: var(--sc-button-hover-border-color-primary-plain);
  --sc-button-active-text-color: var(--sc-button-active-text-color-primary-plain);
}

/* success */
.sc-btn--success {
  --sc-button-text-color:var(--sc-button-text-color-success);
  --sc-button-bg-color: var(--sc-button-bg-color-success);
  --sc-button-border-color:var(--sc-button-border-color-success);
  --sc-button-hover-text-color: var(--sc-button-hover-text-color-success);
  --sc-button-hover-bg-color: var(--sc-button-hover-bg-color-success);
  --sc-button-hover-border-color: var(--sc-button-hover-border-color-success);
  --sc-button-active-text-color: var(--sc-button-active-text-color-success);
  --sc-button-active-bg-color: var(--sc-button-active-bg-color-success);
  --sc-button-active-border-color: var(--sc-button-active-border-color-success);
  --sc-button-disabled-text-color: var(--sc-button-disabled-text-color-success);
  --sc-button-disabled-bg-color: var(--sc-button-disabled-bg-color-success);
  --sc-button-disabled-border-color: var(--sc-button-disabled-border-color-success);
}
.sc-btn--success.is-plain {
  --sc-button-text-color:var(--sc-button-text-color-success-plain);
  --sc-button-bg-color: var(--sc-button-bg-color-success-plain);
  --sc-button-border-color:var(--sc-button-border-color-success-plain);
  --sc-button-hover-text-color: var(--sc-button-hover-text-color-success-plain);
  --sc-button-hover-bg-color: var(--sc-button-hover-bg-color-success-plain);
  --sc-button-hover-border-color: var(--sc-button-hover-border-color-success-plain);
  --sc-button-active-text-color: var(--sc-button-active-text-color-success-plain);
}

/* warning */
.sc-btn--warning {
  --sc-button-text-color:var(--sc-button-text-color-warning);
  --sc-button-bg-color: var(--sc-button-bg-color-warning);
  --sc-button-border-color:var(--sc-button-border-color-warning);
  --sc-button-hover-text-color: var(--sc-button-hover-text-color-warning);
  --sc-button-hover-bg-color: var(--sc-button-hover-bg-color-warning);
  --sc-button-hover-border-color: var(--sc-button-hover-border-color-warning);
  --sc-button-active-text-color: var(--sc-button-active-text-color-warning);
  --sc-button-active-bg-color: var(--sc-button-active-bg-color-warning);
  --sc-button-active-border-color: var(--sc-button-active-border-color-warning);
  --sc-button-disabled-text-color: var(--sc-button-disabled-text-color-warning);
  --sc-button-disabled-bg-color: var(--sc-button-disabled-bg-color-warning);
  --sc-button-disabled-border-color: var(--sc-button-disabled-border-color-warning);
}
.sc-btn--warning.is-plain {
  --sc-button-text-color:var(--sc-button-text-color-warning-plain);
  --sc-button-bg-color: var(--sc-button-bg-color-warning-plain);
  --sc-button-border-color:var(--sc-button-border-color-warning-plain);
  --sc-button-hover-text-color: var(--sc-button-hover-text-color-warning-plain);
  --sc-button-hover-bg-color: var(--sc-button-hover-bg-color-warning-plain);
  --sc-button-hover-border-color: var(--sc-button-hover-border-color-warning-plain);
  --sc-button-active-text-color: var(--sc-button-active-text-color-warning-plain);
}

/* danger */
.sc-btn--danger {
  --sc-button-text-color:var(--sc-button-text-color-danger);
  --sc-button-bg-color: var(--sc-button-bg-color-danger);
  --sc-button-border-color:var(--sc-button-border-color-danger);
  --sc-button-hover-text-color: var(--sc-button-hover-text-color-danger);
  --sc-button-hover-bg-color: var(--sc-button-hover-bg-color-danger);
  --sc-button-hover-border-color: var(--sc-button-hover-border-color-danger);
  --sc-button-active-text-color: var(--sc-button-active-text-color-danger);
  --sc-button-active-bg-color: var(--sc-button-active-bg-color-danger);
  --sc-button-active-border-color: var(--sc-button-active-border-color-danger);
  --sc-button-disabled-text-color: var(--sc-button-disabled-text-color-danger);
  --sc-button-disabled-bg-color: var(--sc-button-disabled-bg-color-danger);
  --sc-button-disabled-border-color: var(--sc-button-disabled-border-color-danger);
}
.sc-btn--danger.is-plain {
  --sc-button-text-color:var(--sc-button-text-color-danger-plain);
  --sc-button-bg-color: var(--sc-button-bg-color-danger-plain);
  --sc-button-border-color:var(--sc-button-border-color-danger-plain);
  --sc-button-hover-text-color: var(--sc-button-hover-text-color-danger-plain);
  --sc-button-hover-bg-color: var(--sc-button-hover-bg-color-danger-plain);
  --sc-button-hover-border-color: var(--sc-button-hover-border-color-danger-plain);
  --sc-button-active-text-color: var(--sc-button-active-text-color-danger-plain);
}

/* info */
.sc-btn--info {
  --sc-button-text-color:var(--sc-button-text-color-info);
  --sc-button-bg-color: var(--sc-button-bg-color-info);
  --sc-button-border-color:var(--sc-button-border-color-info);
  --sc-button-hover-text-color: var(--sc-button-hover-text-color-info);
  --sc-button-hover-bg-color: var(--sc-button-hover-bg-color-info);
  --sc-button-hover-border-color: var(--sc-button-hover-border-color-info);
  --sc-button-active-text-color: var(--sc-button-active-text-color-info);
  --sc-button-active-bg-color: var(--sc-button-active-bg-color-info);
  --sc-button-active-border-color: var(--sc-button-active-border-color-info);
  --sc-button-disabled-text-color: var(--sc-button-disabled-text-color-info);
  --sc-button-disabled-bg-color: var(--sc-button-disabled-bg-color-info);
  --sc-button-disabled-border-color: var(--sc-button-disabled-border-color-info);
}
.sc-btn--info.is-plain {
  --sc-button-text-color:var(--sc-button-text-color-info-plain);
  --sc-button-bg-color: var(--sc-button-bg-color-info-plain);
  --sc-button-border-color:var(--sc-button-border-color-info-plain);
  --sc-button-hover-text-color: var(--sc-button-hover-text-color-info-plain);
  --sc-button-hover-bg-color: var(--sc-button-hover-bg-color-info-plain);
  --sc-button-hover-border-color: var(--sc-button-hover-border-color-info-plain);
  --sc-button-active-text-color: var(--sc-button-active-text-color-info-plain);
}